<template>
	<view class="content">
		<canvas canvas-id="canvas" @click='change' style="width:90px;height: 30px;"></canvas>
		<!-- 结果 -->
		<view class="" style="margin-top: 100rpx;">
			{{text}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: "", // 图形验证
				ctx: null,
			}
		},
		onReady() {
			var ctx = this.ctx = uni.createCanvasContext('canvas');
			console.log(ctx)
			this.drawPic();
		},
		methods: {
			change() {
				this.drawPic();
			},
			randomNum(min, max) {
				return Math.floor(Math.random() * (max - min) + min);
			},
			/**生成一个随机色**/
			randomColor(min, max) {
				let r = this.randomNum(min, max);
				let g = this.randomNum(min, max);
				let b = this.randomNum(min, max);
				return "rgb(" + r + "," + g + "," + b + ")";
			},
			/**绘制验证码图片**/
			drawPic() {
				var ctx = this.ctx
				var _this = this
				/**绘制背景色**/
				ctx.fillStyle = this.randomColor(180, 240); //颜色若太深可能导致看不清
				ctx.fillRect(0, 0, 90, 28)
				/**绘制文字**/
				var arr;
				var text = '';
				var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
				for (var i = 0; i < 4; i++) {
					var txt = str[this.randomNum(0, str.length)];
					ctx.fillStyle = this.randomColor(50, 160); //随机生成字体颜色
					ctx.font = this.randomNum(20, 26) + 'px SimHei'; //随机生成字体大小
					var x = 5 + i * 20;
					var y = this.randomNum(20, 25);
					var deg = this.randomNum(-20, 20);
					//修改坐标原点和旋转角度
					ctx.translate(x, y);
					ctx.rotate(deg * Math.PI / 180);
					ctx.fillText(txt, 5, 0);
					text = text + txt;
					//恢复坐标原点和旋转角度
					ctx.rotate(-deg * Math.PI / 180);
					ctx.translate(-x, -y);
				}
				/**绘制干扰线**/
				for (var i = 0; i < 4; i++) {
					ctx.strokeStyle = this.randomColor(40, 180);
					ctx.beginPath();
					ctx.moveTo(this.randomNum(0, 90), this.randomNum(0, 28));
					ctx.lineTo(this.randomNum(0, 90), this.randomNum(0, 28));
					ctx.stroke();
				}
				/**绘制干扰点**/

				for (var i = 0; i < 20; i++) {
					ctx.fillStyle = this.randomColor(0, 255);
					ctx.beginPath();
					ctx.arc(this.randomNum(0, 90), this.randomNum(0, 28), 1, 0, 2 * Math.PI);
					ctx.fill();
				}
				ctx.draw(false, function() {
					_this.text = text
				});

			}
		}

	}
</script>

<style>
	.content{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
</style>
